Currently the entire eye follows the mouse cursor, but the pupil doesn’t move. I’d like just the eyeball to follow.
I’ve modified the code of a tutorial that I followed. Instead of two eyes, there is one. Instead of circles for eyes, I created a more oval-shaped eye. Here’s the html, css, and javascript I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ISS Position</title>
<link rel="stylesheet" href="styles/main.css" />
<script>
document.addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelector(".eye");
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.clientX - x, event.clientY - y);
let rot = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = `rotate(${rot}deg)`;
}
</script>
</head>
<body>
<h1>Welcome to the ISS Locater</h1>
<div class="eye-container">
<div class="eye">
<div class="pupil"></div>
</div>
</div>
<div class="container">
<label for="lat">Latitude</label>
<input id="lat" type="text" placeholder="<%= lat %>" name="Latitude" />
<label for="lon">Longitude</label>
<input id="lon" type="text" placeholder="<%= lon %>" name="Longitude" />
<h2>Click the link below to see where it is now on a map</h2>
<a
href="https://www.google.com/maps/search/?api=1&query=<%= lat %>,<%= lon %>"
>Current ISS Location</a
>
</div>
</body>
</html>
h1 {
margin-top: 100px;
text-align: center;
color: white;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100vh;
}
body {
background-color: black;
}
label {
color: white;
}
h2 {
color: white;
}
.eye-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
}
.eye {
width: 50px;
height: 50px;
background-color: white;
border-radius: 80% 10%;
position: relative;
display: block;
}
.eye:before {
content: "";
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
import express from 'express';
import bodyParser from 'body-parser';
import axios from 'axios';
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get("/", async (req, res) => {
try {
const response = await axios.get("http://api.open-notify.org/iss-now.json");
const result = response;
const lat = result.data.iss_position.latitude;
const lon = result.data.iss_position.longitude;
res.render("index.ejs", { lat: lat, lon: lon });
} catch (error) {
console.error(error.response.data);
res.status(500).send("Failed to fetch random activity.");
}
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
You need to sign in to view this answers
Leave feedback about this