diff --git a/Quiz.html b/Quiz.html new file mode 100644 index 00000000..22113c15 --- /dev/null +++ b/Quiz.html @@ -0,0 +1,25 @@ + + + + + + Document + + + +
+

QUIZ

+
+

Qustions goes here

+
+ + + + +
+ +
+
+ + + \ No newline at end of file diff --git a/Quiz_Creator.mp4 b/Quiz_Creator.mp4 new file mode 100644 index 00000000..0105a08a Binary files /dev/null and b/Quiz_Creator.mp4 differ diff --git a/Quiz_Creator.pptx b/Quiz_Creator.pptx new file mode 100644 index 00000000..48f22183 Binary files /dev/null and b/Quiz_Creator.pptx differ diff --git a/Quiz_creator_Report.docx b/Quiz_creator_Report.docx new file mode 100644 index 00000000..3495bdcb Binary files /dev/null and b/Quiz_creator_Report.docx differ diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 00000000..6b290033 --- /dev/null +++ b/desktop.ini @@ -0,0 +1,2 @@ +[LocalizedFileNames] +index.html=@index,0 diff --git a/index.html b/index.html new file mode 100644 index 00000000..b7632b5a --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Weather App + + + +
+
+ +
+
+
+
New York, US
+
Wednesday 22 July 2020
+
+
+
15°c
+
Sunny
+
13°c / 16°c
+
+
+
+ + + diff --git a/main.css b/main.css new file mode 100644 index 00000000..310217fd --- /dev/null +++ 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 new file mode 100644 index 00000000..bf6e9578 --- /dev/null +++ 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)}°c`; + + 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}`; +} \ No newline at end of file diff --git a/script1.js b/script1.js new file mode 100644 index 00000000..7f698477 --- /dev/null +++ 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 { + if(currentQuestionIndex