MLSAKIET0821 · raghuvanshisakshi · Oct 29, 2024 · Oct 29, 2024
diff --git a/Quiz.html b/Quiz.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="stye.css">
+</head>
+<body>
+    <div class ="app">
+        <h1>QUIZ</h1>
+        <div class  = "quiz">
+            <h2 id  = "questions">Qustions goes here</h2>
+            <div id="answer-buttons">
+                <button class  = "btn">Answer 1</button>
+                <button class  = "btn">Answer 2</button>
+                <button class  = "btn">Answer 3</button>
+                <button class  = "btn">Answer 4</button>
+            </div>
+            <button id = "next-btn">Next</button>
+        </div>
+    </div>
+    <script src = "script1.js"></script>
+</body>
+</html>
diff --git a/Quiz_Creator.mp4 b/Quiz_Creator.mp4
diff --git a/Quiz_Creator.pptx b/Quiz_Creator.pptx
diff --git a/Quiz_creator_Report.docx b/Quiz_creator_Report.docx
diff --git a/desktop.ini b/desktop.ini
@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+index.html=@index,0
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Weather App</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="app-wrap">
+    <header>
+      <input type="text" autocomplete="off" class="search-box" placeholder="Search for a city..." />
+    </header>
+    <main>
+      <section class="location">
+        <div class="city">New York, US</div>
+        <div class="date">Wednesday 22 July 2020</div>
+      </section>
+      <div class="current">
+        <div class="temp">15<span>°c</span></div>
+        <div class="weather">Sunny</div>
+        <div class="hi-low">13°c / 16°c</div>
+      </div>
+    </main>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,95 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'montserrat', sans-serif;
+  background-image: url('bg.jpg');
+  background-size: cover;
+  background-position: top center;
+}
+
+.app-wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
+}
+
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 15px 15px;
+}
+
+header input {
+  width: 100%;
+  max-width: 280px;
+  padding: 10px 15px;
+  border: none;
+  outline: none;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 0px 16px 0px 16px;
+  border-bottom: 3px solid gray;
+
+  color: #313131;
+  font-size: 20px;
+  font-weight: 300;
+  transition: 0.2s ease-out;
+}
+
+header input:focus {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+main {
+  flex: 1 1 100%;
+  padding: 25px 25px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.location .city {
+  color: #fff;
+  font-size: 32px;
+  font-weight: 500;
+  margin-bottom: 5px;
+}
+
+.location .date {
+  color: #fff;
+  font-size: 16px;
+}
+
+.current .temp {
+  color: #fff;
+  font-size: 102px;
+  font-weight: 900;
+  margin: 30px 0px;
+  text-shadow: 2px 10px rgba(0, 0, 0, 0.6);
+}
+
+.current .temp span {
+  font-weight: 500;
+}
+
+.current .weather {
+  color: #fff;
+  font-size: 32px;
+  font-weight: 700;
+  font-style: italic;
+  margin-bottom: 15px;
+  text-shadow: 0px 3px rgba(0, 0, 0, 0.4);
+}
+
+.current .hi-low {
+  color: #fff;
+  font-size: 24px;
+  font-weight: 500;
+  text-shadow: 0px 4px rgba(0, 0, 0, 0.4);
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,50 @@
+const api = {
+  key: "fcc8de7015bbb202209bbf0261babf4c",
+  base: "https://api.openweathermap.org/data/2.5/"
+}
+
+const searchbox = document.querySelector('.search-box');
+searchbox.addEventListener('keypress', setQuery);
+
+function setQuery(evt) {
+  if (evt.keyCode == 13) {
+    getResults(searchbox.value);
+  }
+}
+
+function getResults (query) {
+  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
+    .then(weather => {
+      return weather.json();
+    }).then(displayResults);
+}
+
+function displayResults (weather) {
+  let city = document.querySelector('.location .city');
+  city.innerText = `${weather.name}, ${weather.sys.country}`;
+
+  let now = new Date();
+  let date = document.querySelector('.location .date');
+  date.innerText = dateBuilder(now);
+
+  let temp = document.querySelector('.current .temp');
+  temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;
+
+  let weather_el = document.querySelector('.current .weather');
+  weather_el.innerText = weather.weather[0].main;
+
+  let hilow = document.querySelector('.hi-low');
+  hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`;
+}
+
+function dateBuilder (d) {
+  let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+  let day = days[d.getDay()];
+  let date = d.getDate();
+  let month = months[d.getMonth()];
+  let year = d.getFullYear();
+
+  return `${day} ${date} ${month} ${year}`;
+}
diff --git a/script1.js b/script1.js
@@ -0,0 +1,119 @@
+const questions = [
+    {
+        question: "Which is largest animal in the World",
+        answers:[
+            {text: "Shark",correct: false},
+            {text: "Blue Whale",correct: true},
+            {text: "Elephnat",correct: false},
+            {text: "Giraffe",correct: false},
+        ]
+    },
+    {
+        question: "Which is largest river in the World",
+        answers:[
+            {text: "Amazon",correct: false},
+            {text: "Nile",correct: true},
+            {text: "Gnaga",correct: false},
+            {text: "Bamhaputra",correct: false},
+        ]
+    },
+    {
+        question: "Which is largest animal in the World",
+        answers:[
+            {text: "Shark",correct: false},
+            {text: "Blue Whale",correct: true},
+            {text: "Elephnat",correct: false},
+            {text: "Giraffe",correct: false},
+        ]
+    },
+    {
+        question: "Which is largest animal in the World",
+        answers:[
+            {text: "Shark",correct: false},
+            {text: "Blue Whale",correct: true},
+            {text: "Elephnat",correct: false},
+            {text: "Giraffe",correct: false},
+        ]
+    },
+
+]
+const questionElement = document.getElementById("questions");
+const answerButtons = document.getElementById("answer-buttons");
+const nextButton = document.getElementById("next-btn");
+
+let currentQuestionIndex=0;
+let score  = 0;
+function startQuiz(){
+    currentQuestionIndex = 0;
+    score  = 0;
+    nextButton.innerHTML = "Next";
+    showQuestion();
+
+}
+function showQuestion(){
+    resetState();
+    let currentQuestion = questions[currentQuestionIndex];
+    let questionNo =  currentQuestionIndex + 1;
+    questionElement.innerHTML = questionNo + "."+ currentQuestion.question;
+
+    currentQuestion.answers.forEach(answer => {
+        const button = document.createElement("button");
+        button.innerHTML = answer.text;
+        button.classList.add("btn");
+        answerButtons.appendChild(button);
+        if(answer.correct){
+            // it will add the true or false dataset
+           button.dataset.correct = answer.correct; 
+        }
+        button.addEventListener("click",selectAnswer);
+        })
+}
+function resetState(){
+    nextButton.style.display = "none";
+    while(answerButtons.firstChild){
+        answerButtons.removeChild(answerButtons.firstChild);
+    }
+}
+
+    function selectAnswer(e){
+        const selectedBtn = e.target;
+        const isCorrect =selectedBtn.dataset.correct === "true";
+        if(isCorrect){
+            selectedBtn.classList.add("correct");
+            score++;
+        }
+        else{
+            selectedBtn.classList.add("incorrect");
+        }
+        Array.from(answerButtons.children).forEach(button=>{
+            if(button.dataset.correct==="true"){
+                button.classList.add("correct");
+            }
+            button.disabled = true;
+        });
+        nextButton.style.display = "block";
+    }
+    function showScore(){
+        resetState();
+        questionElement.innerHTML = `Your scored ${score} out of ${questions.length}!`;
+        nextButton.innerHTML = "Play Again";
+        nextButton.style.display = "block";
+    }
+    function handleNextButton(){
+        currentQuestionIndex++;
+        if(currentQuestionIndex <questions.length){
+            showQuestion();
+        }
+        else{
+            showScore();
+        }
+    }
+    nextButton.addEventListener("click",()=>{
+    if(currentQuestionIndex<questions.length){
+        handleNextButton();
+    }
+    else{
+        startQuiz();
+    }
+});
+startQuiz();
diff --git a/stye.css b/stye.css
@@ -0,0 +1,69 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins',sans-serif;
+    box-sizing: border-box;
+}
+body{
+    background: #001e4d;
+}
+.app{
+    background: #fff;
+    width: 90%;
+    max-width: 600px;
+    margin: 100px auto 0;
+    border-radius: 10px;
+    padding: 30px;
+}
+.app h1{
+    font-size: 25px;
+    color: #001e4d;
+    font-weight: 600;
+    border-bottom: 1px solid #333;
+    padding-bottom: 30px;
+}
+.quiz{
+    padding: 20px 0;
+}
+.quiz h2{
+    font-size: 18px;
+    color: #001e4d;
+    font-weight: 600;
+}
+.btn{
+    background: #fff;
+    color: #222;
+    font-weight: 500;
+    width: 100%;
+    border: 1px solid #222;
+    padding: 10px;
+    margin: 10px 0;
+    text-align: left;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.btn:hover:not([disabled]){
+    background: #222;
+    color: #fff;
+}
+.btn:disabled{
+    cursor: no-drop;
+}
+#next-btn{
+    background: #001e4d;
+    color: #fff;
+    font-weight: 500;
+    width: 150px;
+    border: 0;
+    padding: 10px;
+    margin: 20px auto 0;
+    cursor: pointer;
+    display: none;
+
+}
+.correct{
+    background: #9aeabc;
+}
+.incorrect{
+    background: #ff9393;
+}
diff --git a/weahter_app_report.docx b/weahter_app_report.docx
diff --git a/weather_app (2).pptx b/weather_app (2).pptx
diff --git a/weather_app.mp4 b/weather_app.mp4