Birkbeck2 · github-classroom · Mar 10, 2024 · Mar 10, 2024 · Mar 10, 2024 · Mar 10, 2024
diff --git a/Images/Anime-Desktop-Wallpaper-4k copy.jpg b/Images/Anime-Desktop-Wallpaper-4k copy.jpg
diff --git a/Images/photo-1549309019-a1d77aeae74f.jpg b/Images/photo-1549309019-a1d77aeae74f.jpg
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+[Click to view my first Animation](https://birkbeck2.github.io/web-project-ikaur02/)
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Visual Design Final Project</title>
+<link rel="stylesheet" href="styles.css"><!--Linking CSS file-->
+</head>
+
+<body>
+    <div class="container"><!--Root Container-->
+        <div class="header"><!--Sub-Container 01-->
+            <h1>Welcome to see the magic!</h1><!--Header title-->
+
+              <!--Form top change color of header on the basis of user selection-->
+            <form id="change-color" method="post">
+                <select id="color" name="color">
+                <option value="black">Black</option><!--Values in form selection-->
+                <option value="purple">Purple</option>
+                <option value="randomcolor">Random Color</option>
+                </select>
+
+                <div class="button"><!--Sub-Container 02-->
+                     <button type="submit" id="btn">Let's change</button><!--Submit button-->
+                </div>
+            </form>
+        </div>  
+
+
+    <section aria-label="Shapes" class="flex-container">
+        <div class="shape orange kite" role="img" aria-label="Kite">
+        </div>
+      </section>
+
+      <canvas id="myCanvas"> </canvas>
+
+    <!--Form with drop down to show weather of different countries-->
+    <form id="enter-state" method="post">
+        <select id="state" name="state">
+        <option value="london">London</option> <!--Values in form selection-->
+        <option value="singapore">Singapore</option>
+        <option value="dubai">Dubai</option>
+        <option value="china">China</option>
+        <option value="colombia">Colombia</option>
+        <option value="toronto">Toronto</option>
+        <option value="nyc">New York</option>
+        <option value="vancouver">Vancouver</option>
+        <option value="malaysia">Malaysia</option>
+        </select>
+
+        <div class="button"><!--Sub-Container 02-->
+             <button type="button" onclick="fetchWeather()" id="btn">Show weather</button>
+        </div>
+
+        <textarea id="response_text" placeholder="Your response"></textarea>
+
+    </div>
+
+      <script src="scripts.js" defer></script><!--Linking Javascript file-->
+
+</body>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,144 @@
+/*Accessing the form whose header colors will be changed*/
+
+let form = document.getElementById('change-color');   
+let header = document.querySelector('.header');
+
+/*Function to change color*/
+
+function changeColor(event) {
+    event.preventDefault();     //Preventing the browser to perform it's default actions//
+
+    let colorSelect = document.getElementById('color');
+    let color = colorSelect.value;
+
+    if (color === 'randomcolor') {
+        // Generate a random color
+        let randomColor = getRandomColor();
+        header.style.backgroundColor = randomColor;
+    } else {
+        // Clear the inline background color style
+        header.style.backgroundColor = '';
+
+        // Change the class of header based on the selected color
+        header.className = 'header ' + color;
+    }
+}
+
+// Function to generate a random color//
+function getRandomColor() {
+    let letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+// Adding an event to submit button which executes function changeColor when pressed//
+form.addEventListener('submit', changeColor); 
+
+
+/*Rotating kite
+
+let kite = document.querySelector(".flex-container .shape") //Accessing the container//
+
+    kite.addEventListener('click', function() {        //Adding an event when the shape is clicked//
+    kite.style.transform = "rotate(45deg)";         //Transform function to rotate it to 45 deg//
+
+        kite.addEventListener('click', function(){  //Adding an event when the shape is clicked
+        kite.style.transform= "rotate(0deg)";       //Transform function to rotate it to back to it's original position//
+        });
+    });*/
+
+
+
+//Function to fetch weather using weather API//
+// Source: https://yahoo-weather5.p.rapidapi.com/weather?location=//
+
+function fetchWeather() {
+    var user_country = document.getElementById("state").value;
+    var api_url = "https://yahoo-weather5.p.rapidapi.com/weather?location=" + encodeURIComponent(user_country) + "&format=json&u=f";
+
+    //Fetching key and host to make the url work//
+    fetch(api_url, {
+      headers: {
+        "X-RapidAPI-Key": "448f868c03mshbade7fb646f5009p1d4104jsnfc7728c9e686",
+        "X-RapidAPI-Host": "yahoo-weather5.p.rapidapi.com"
+      }
+    })
+
+    .then(response => response.json())
+    .then(data => {
+      var temperature_op=data.current_observation.condition.temperature //to print only the temperature
+      document.getElementById("response_text").value = "Temperature: " + temperature_op + "°F"; //print in the text area
+    })
+    .catch(error => {
+      document.getElementById("response_text").value = "Error fetching weather data: " + error; //error handling
+    });
+  }
+
+
+//Function to run animation on canvas//
+
+const canvas = document.querySelector('canvas');
+canvas.width = window.innerWidth;   // Setting canvas width //
+canvas.height = window.innerHeight-278; // Setting canvas height//
+const ctx = canvas.getContext('2d'); //Accessing all 2d elements on canvas// 
+
+
+//Function to store the values of the circle//
+
+function Circle (x, y, r, dy) {
+    this.x = x;     ////Storing the value of one side
+    this.y = y;     //Storing the value of another side
+    this.r = r ;    //Storing the value of radius
+    this.dy= dy;    //Storing the value of Vertical velocity
+
+    //Json function to parse the Circle values// 
+    this.draw = function() {    
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
+    ctx.fillStyle='white';
+    ctx.fill();
+    }
+
+    //Function to make the object bounce back when it touches the corner of the canvas//
+    this.update = function(){
+    if (this.y + this.r > canvas.height || this.y - this.r < 0){    
+        this.dy= -this.dy;
+    }
+
+    this.y += this.dy;
+    this.draw(); //Executing the function to draw the circle//
+    }
+}
+
+var Circles = [];   //empty array which allow data to be pushed into it// 
+
+
+for( var i=0; i < 800; i++) {               //For loop to make multiple circles// 
+    var r = 4;                             //assigning a value to the radius of the circle// 
+    var x = Math.random() * canvas.width;   //Assigning a math function for Random value for x-axis//
+    var y = Math.random() * canvas.height;  //Assigning a math function for Random value for y-axis//
+    var dy = 2;    
+
+    Circles.push(new Circle(x, y, r, dy));
+}
+
+//Function to animate the object//
+function animate(){
+
+    requestAnimationFrame(animate);
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height); //Clear the canvas each time//
+
+    for (i=0; i < Circles.length; i++){ 
+
+        Circles[i].update();
+    }
+}
+
+animate(); //Execute the animation function defined above//
+
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,163 @@
+
+/* To style the background and ensures that the font size is all the same */ 
+html {    
+  box-sizing: border-box;
+  background: #6a0d83;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
+  font-size: 20px;
+  font-weight: 200;
+}
+
+/*To set the padding and margin of the body*/
+body {          
+  margin: 0;
+  padding: 0;
+}
+
+/*Properties of Root container*/
+
+.container {        
+  display: flex;
+  position: relative;
+  background: url(Images/photo-1549309019-a1d77aeae74f.jpg) top center no-repeat;
+  background-size: auto;
+  width: 100%;
+  flex-direction: column;
+  align-items: top;
+  z-index: 0;
+}
+
+/*Properties of sub container-01*/
+.header 
+{
+  display: flex;
+  background-color: black;
+  flex-direction: row;
+  align-items:center;
+  width: 100%;
+  justify-content: center;
+  height: 20vh;
+  z-index: 1;
+}
+
+h1 {
+  margin: 12px 20px;
+  padding: 12px 20px;
+  color:white;
+  font-size: 36px;
+  font-weight: 200;
+}
+
+/*Properties of sub container-02*/
+.button{  
+  display: inline-block;
+  z-index: 2;
+  padding: 12px 20px;
+}
+
+#btn{
+
+  padding: 12px 24px;
+  background-color: black;
+  height: 40%;
+  border-radius: 24px;
+  font-size: 20px;
+
+}
+
+/*Properties of Form */
+form select
+{
+  padding: 12px;
+  font-size: 20px;
+  color: white;
+  background-color: transparent;
+  border-radius: 24px;
+  height: 60%;
+}
+
+form button {
+  padding: 12px;
+  font-size: 20px;
+  color: white;
+  background-color: transparent;
+  border-radius: 24px;
+  height: 60%;
+}
+
+/* Colors */
+.purple{
+  background: #6a0d83;
+}
+
+.black {
+  background: black;
+}*/
+
+/*Animation*/
+
+#sandbox{
+  height: 0;
+  display: flex;
+  width:100%;
+}
+
+/* Shape gallery */
+
+
+@media screen and (min-width: 600px) {
+  .flex-container {
+    flex-direction: row;
+  }
+}
+.shape {
+  width: 5rem;
+  transition: all 0.4s;
+}
+
+/*Kite shape
+
+.kite {
+  width: 0;
+  height: 0;
+  border: 50px solid transparent;
+  border-bottom: 50px solid black;
+  bottom: 150px; 
+  left: 520px;
+  position: relative;
+}
+
+.kite:after {
+  content: '';
+  position: absolute;
+  left: -50px; 
+  top: 50px;
+  width: 0;
+  height: 0;
+  border: 50px solid transparent;
+  border-top: 90px solid black;
+  z-index: -1
+}*/
+
+/*Second form properties */
+
+#enter-state{
+  margin: 20px;
+  align-items: baseline;
+  justify-content: center;
+  padding-left: 360px;
+}
+
+#state {
+  background-color: gray;
+}
+
+textarea{
+  padding: 2px;
+  height: 20px;
+  background-color: gainsboro;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
+  font-size: 20px;
+  font-weight: 200;
+  text-align: center;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[Click to view my first Animation](https://birkbeck2.github.io/web-project-ikaur02/)