From ee9fb85d06be3bc805cb65c3ff61f5895ea4d01f Mon Sep 17 00:00:00 2001 From: BODDU GIRIRAJASEKHAR <116698450+Grs257@users.noreply.github.com> Date: Tue, 11 Jun 2024 10:03:46 +0530 Subject: [PATCH] added --- GiriRajSekahr/QuizMaker/.vscode/settings.json | 3 + GiriRajSekahr/QuizMaker/app.js | 220 ++++++++++++++++++ GiriRajSekahr/QuizMaker/index.html | 24 ++ GiriRajSekahr/QuizMaker/styles.css | 40 ++++ GiriRajSekahr/ResumeMaker/index.html | 69 ++++++ GiriRajSekahr/ResumeMaker/scripts.js | 78 +++++++ GiriRajSekahr/ResumeMaker/styles.css | 41 ++++ GiriRajSekahr/Studentform/index.html | 49 ++++ GiriRajSekahr/Studentform/script.js | 72 ++++++ GiriRajSekahr/Studentform/styles.css | 52 +++++ 10 files changed, 648 insertions(+) create mode 100644 GiriRajSekahr/QuizMaker/.vscode/settings.json create mode 100644 GiriRajSekahr/QuizMaker/app.js create mode 100644 GiriRajSekahr/QuizMaker/index.html create mode 100644 GiriRajSekahr/QuizMaker/styles.css create mode 100644 GiriRajSekahr/ResumeMaker/index.html create mode 100644 GiriRajSekahr/ResumeMaker/scripts.js create mode 100644 GiriRajSekahr/ResumeMaker/styles.css create mode 100644 GiriRajSekahr/Studentform/index.html create mode 100644 GiriRajSekahr/Studentform/script.js create mode 100644 GiriRajSekahr/Studentform/styles.css diff --git a/GiriRajSekahr/QuizMaker/.vscode/settings.json b/GiriRajSekahr/QuizMaker/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/GiriRajSekahr/QuizMaker/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/GiriRajSekahr/QuizMaker/app.js b/GiriRajSekahr/QuizMaker/app.js new file mode 100644 index 0000000..f511e80 --- /dev/null +++ b/GiriRajSekahr/QuizMaker/app.js @@ -0,0 +1,220 @@ +const quizData = [ + { + question: "What is the capital of France?", + options: ["Paris", "London", "Berlin", "Rome"], + answer: "Paris" + }, + { + question: "Who wrote 'To Kill a Mockingbird'?", + options: ["Harper Lee", "J.K. Rowling", "Stephen King", "Ernest Hemingway"], + answer: "Harper Lee" + }, + { + question: "Which planet is known as the Red Planet?", + options: ["Mars", "Venus", "Jupiter", "Mercury"], + answer: "Mars" + }, + { + question: "What is the chemical symbol for water?", + options: ["H2O", "CO2", "O2", "NaCl"], + answer: "H2O" + }, + { + question: "Who is the author of 'The Great Gatsby'?", + options: ["F. Scott Fitzgerald", "Ernest Hemingway", "William Faulkner", "John Steinbeck"], + answer: "F. Scott Fitzgerald" + }, + { + question: "What is the tallest mammal?", + options: ["Giraffe", "Elephant", "Hippo", "Rhinoceros"], + answer: "Giraffe" + }, + { + question: "Which is the largest ocean on Earth?", + options: ["Pacific Ocean", "Atlantic Ocean", "Indian Ocean", "Arctic Ocean"], + answer: "Pacific Ocean" + }, + { + question: "Who painted the Mona Lisa?", + options: ["Leonardo da Vinci", "Vincent van Gogh", "Pablo Picasso", "Michelangelo"], + answer: "Leonardo da Vinci" + }, + { + question: "What year did the Titanic sink?", + options: ["1912", "1907", "1921", "1899"], + answer: "1912" + }, + { + question: "Which country is known as the 'Land of the Rising Sun'?", + options: ["Japan", "China", "South Korea", "India"], + answer: "Japan" + }, + { + question: "Who discovered penicillin?", + options: ["Alexander Fleming", "Albert Einstein", "Isaac Newton", "Marie Curie"], + answer: "Alexander Fleming" + }, + { + question: "Which novel features the characters Scout and Atticus Finch?", + options: ["To Kill a Mockingbird", "Pride and Prejudice", "The Catcher in the Rye", "1984"], + answer: "To Kill a Mockingbird" + }, + { + question: "What is the largest organ in the human body?", + options: ["Skin", "Liver", "Heart", "Brain"], + answer: "Skin" + }, + { + question: "Who is known as the 'Father of Computers'?", + options: ["Charles Babbage", "Alan Turing", "Bill Gates", "Steve Jobs"], + answer: "Charles Babbage" + }, + { + question: "What is the chemical symbol for gold?", + options: ["Au", "Ag", "Cu", "Fe"], + answer: "Au" + }, + { + question: "Which element has the chemical symbol 'Fe'?", + options: ["Iron", "Gold", "Silver", "Copper"], + answer: "Iron" + }, + { + question: "Who was the first woman to win a Nobel Prize?", + options: ["Marie Curie", "Rosalind Franklin", "Florence Nightingale", "Jane Goodall"], + answer: "Marie Curie" + }, + { + question: "In which year did World War I begin?", + options: ["1914", "1918", "1939", "1941"], + answer: "1914" + }, + { + question: "Who composed the 'Moonlight Sonata'?", + options: ["Ludwig van Beethoven", "Wolfgang Amadeus Mozart", "Johann Sebastian Bach", "Frederic Chopin"], + answer: "Ludwig van Beethoven" + }, + { + question: "What is the largest mammal in the world?", + options: ["Blue Whale", "African Elephant", "Giraffe", "Hippopotamus"], + answer: "Blue Whale" + }, + { + question: "Who was the first President of the United States?", + options: ["George Washington", "Thomas Jefferson", "Abraham Lincoln", "John Adams"], + answer: "George Washington" + }, + { + question: "What is the longest river in the world?", + options: ["Nile River", "Amazon River", "Yangtze River", "Mississippi River"], + answer: "Nile River" + }, + { + question: "Which gas makes up the largest portion of the Earth's atmosphere?", + options: ["Nitrogen", "Oxygen", "Carbon Dioxide", "Argon"], + answer: "Nitrogen" + }, + { + question: "Who painted 'Starry Night'?", + options: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Claude Monet"], + answer: "Vincent van Gogh" + }, + { + question: "What is the chemical symbol for silver?", + options: ["Ag", "Au", "Cu", "Fe"], + answer: "Ag" + }, + { + question: "Who was the first woman to fly solo across the Atlantic Ocean?", + options: ["Amelia Earhart", "Valentina Tereshkova", "Bessie Coleman", "Sally Ride"], + answer: "Amelia Earhart" + }, + { + question: "Who was the first man to walk on the Moon?", + options: ["Neil Armstrong", "Buzz Aldrin", "Yuri Gagarin", "John Glenn"], + answer: "Neil Armstrong" + }, +]; + +const quizContainer = document.getElementById("question-container"); +const submitButton = document.getElementById("submit-answer"); +const feedbackContainer = document.getElementById("feedback"); +const resultContainer = document.getElementById("result"); +const startButton = document.getElementById("start-quiz"); +const timerDisplay = document.getElementById("timer"); + +let currentQuestionIndex = 0; +let score = 0; +let timer; + +startButton.addEventListener("click", startQuiz); + +function startQuiz() { + startButton.style.display = "none"; + showQuestion(); + startTimer(); +} + +function showQuestion() { + const currentQuestion = quizData[currentQuestionIndex]; + quizContainer.innerHTML = ` +

${currentQuestion.question}

+ + `; +} + +submitButton.addEventListener("click", submitAnswer); + +function submitAnswer() { + const selectedAnswer = document.querySelector('input[name="answer"]:checked'); + if (!selectedAnswer) { + feedbackContainer.textContent = "Please select an answer."; + return; + } + + const answer = selectedAnswer.value; + const currentQuestion = quizData[currentQuestionIndex]; + + if (answer === currentQuestion.answer) { + feedbackContainer.textContent = "Correct!"; + score++; + } else { + feedbackContainer.textContent = "Wrong!"; + } + + currentQuestionIndex++; + if (currentQuestionIndex < quizData.length) { + showQuestion(); + } else { + endQuiz(); + } +} + +function endQuiz() { + clearInterval(timer); + quizContainer.style.display = "none"; + submitButton.style.display = "none"; + feedbackContainer.style.display = "none"; + resultContainer.textContent = `Your score: ${score} / ${quizData.length}`; +} + +function startTimer() { + let timeLimit = 60; // Set the time limit for each question + timerDisplay.textContent = `Time left: ${timeLimit}`; + + timer = setInterval(() => { + timeLimit--; + timerDisplay.textContent = `Time left: ${timeLimit}`; + if (timeLimit <= 0) { + clearInterval(timer); + endQuiz(); + } + }, 1000); +} diff --git a/GiriRajSekahr/QuizMaker/index.html b/GiriRajSekahr/QuizMaker/index.html new file mode 100644 index 0000000..72542f6 --- /dev/null +++ b/GiriRajSekahr/QuizMaker/index.html @@ -0,0 +1,24 @@ + + + + + + Quiz Web Application + + + +
+

Quiz Application

+
+ +
+ +
+
+ +
+
+ + + + diff --git a/GiriRajSekahr/QuizMaker/styles.css b/GiriRajSekahr/QuizMaker/styles.css new file mode 100644 index 0000000..fb31f52 --- /dev/null +++ b/GiriRajSekahr/QuizMaker/styles.css @@ -0,0 +1,40 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f9f9f9; +} + +.quiz-container { + width: 80%; + max-width: 600px; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +#question-container { + margin-bottom: 20px; +} + +button { + margin-top: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +#feedback { + margin-top: 10px; +} + +#result { + margin-top: 20px; + font-weight: bold; +} diff --git a/GiriRajSekahr/ResumeMaker/index.html b/GiriRajSekahr/ResumeMaker/index.html new file mode 100644 index 0000000..19a3b8f --- /dev/null +++ b/GiriRajSekahr/ResumeMaker/index.html @@ -0,0 +1,69 @@ + + + + + + Resume Maker + + + +
+

Resume Maker

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+ + + + + diff --git a/GiriRajSekahr/ResumeMaker/scripts.js b/GiriRajSekahr/ResumeMaker/scripts.js new file mode 100644 index 0000000..c2a55c7 --- /dev/null +++ b/GiriRajSekahr/ResumeMaker/scripts.js @@ -0,0 +1,78 @@ +document.getElementById("resume-form").addEventListener("submit", function (e) { + e.preventDefault(); + const name = document.getElementById("name").value; + const email = document.getElementById("email").value; + const phone = document.getElementById("phone").value; + const careerLevel = document.getElementById("career-level").value; + const industry = document.getElementById("industry").value; + const experience = document.getElementById("experience").value; + const education = document.getElementById("education").value; + const skills = document.getElementById("skills").value; + const certifications = document.getElementById("certifications").value; + generateResume( + name, + email, + phone, + careerLevel, + industry, + experience, + education, + skills, + certifications + ); +}); + +function generateResume( + name, + email, + phone, + careerLevel, + industry, + experience, + education, + skills, + certifications +) { + const resumePreview = document.getElementById("resume-preview"); + resumePreview.innerHTML = ` +

${name}

+

Email: ${email}

+

Phone: ${phone}

+

Career Level: ${capitalize(careerLevel)}

+

Industry: ${capitalize(industry)}

+

Experience

+

${experience}

+

Education

+

${education}

+

Skills

+

${skills}

+

Certifications

+

${certifications}

+ `; +} + +function capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1); +} + +document.getElementById("download-pdf").addEventListener("click", function () { + const { jsPDF } = window.jspdf; + const resumeContent = document.getElementById("resume-preview"); + + // Use HTML2Canvas to capture the resume content + html2canvas(resumeContent).then((canvas) => { + const imgData = canvas.toDataURL("image/png"); + const pdf = new jsPDF(); + pdf.addImage(imgData, "PNG", 10, 10, 190, 0); // Adjust the width and height + pdf.save("resume.pdf"); + }); +}); + +document.getElementById("download-html").addEventListener("click", function () { + const resumeContent = document.getElementById("resume-preview").innerHTML; + const blob = new Blob([resumeContent], { type: "text/html" }); + const link = document.createElement("a"); + link.href = URL.createObjectURL(blob); + link.download = "resume.html"; + link.click(); +}); diff --git a/GiriRajSekahr/ResumeMaker/styles.css b/GiriRajSekahr/ResumeMaker/styles.css new file mode 100644 index 0000000..5e6bf91 --- /dev/null +++ b/GiriRajSekahr/ResumeMaker/styles.css @@ -0,0 +1,41 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f5f5f5; + margin: 0; +} +.resume-maker-container { + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 600px; +} +h1 { + text-align: center; +} +.form-group { + margin-bottom: 15px; +} +.form-group label { + display: block; + margin-bottom: 5px; +} +.form-group input, .form-group textarea, .form-group select { + width: 100%; + padding: 10px; + box-sizing: border-box; +} +.button-group { + display: flex; + justify-content: space-between; + margin-top: 20px; +} +#resume-preview { + margin-top: 20px; + padding: 20px; + border: 1px solid #ddd; +} diff --git a/GiriRajSekahr/Studentform/index.html b/GiriRajSekahr/Studentform/index.html new file mode 100644 index 0000000..c50f42b --- /dev/null +++ b/GiriRajSekahr/Studentform/index.html @@ -0,0 +1,49 @@ + + + + + + Student Enrollment Form + + + +
+

Student Enrollment Form

+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
+ +
+
+ + + + diff --git a/GiriRajSekahr/Studentform/script.js b/GiriRajSekahr/Studentform/script.js new file mode 100644 index 0000000..6916ba7 --- /dev/null +++ b/GiriRajSekahr/Studentform/script.js @@ -0,0 +1,72 @@ +document + .getElementById("enrollment-form") + .addEventListener("submit", function (event) { + event.preventDefault(); + validateForm(); + }); + +function validateForm() { + const name = document.getElementById("name").value.trim(); + const email = document.getElementById("email").value.trim(); + const phone = document.getElementById("phone").value.trim(); + const course = document.getElementById("course").value.trim(); + + resetErrors(); + + if (name === "") { + showError("name", "Name is required"); + return; + } + + if (email === "") { + showError("email", "Email is required"); + return; + } + + if (!isValidEmail(email)) { + showError("email", "Please enter a valid email address"); + return; + } + + if (phone === "") { + showError("phone", "Phone number is required"); + return; + } + + if (!isValidPhone(phone)) { + showError("phone", "Please enter a valid phone number"); + return; + } + + if (course === "") { + showError("course", "Please select a course"); + return; + } + + // Form is valid, you can submit the data to the server or perform further actions + alert("Form submitted successfully!"); +} + +function resetErrors() { + const errors = document.querySelectorAll(".error"); + errors.forEach((error) => { + error.textContent = ""; + }); +} + +function showError(inputId, errorMessage) { + const errorElement = document.getElementById(inputId + "-error"); + errorElement.textContent = errorMessage; +} + +function isValidEmail(email) { + // Regular expression for validating email format + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); +} + +function isValidPhone(phone) { + // Regular expression for validating phone number format (simple validation) + const phoneRegex = /^\d{10}$/; + return phoneRegex.test(phone); +} diff --git a/GiriRajSekahr/Studentform/styles.css b/GiriRajSekahr/Studentform/styles.css new file mode 100644 index 0000000..42aa304 --- /dev/null +++ b/GiriRajSekahr/Studentform/styles.css @@ -0,0 +1,52 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +.container { + max-width: 600px; + margin: 50px auto; + padding: 20px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.form-group { + margin-bottom: 20px; +} + +label { + font-weight: bold; +} + +input[type="text"], +input[type="email"], +input[type="tel"], +textarea, +select { + width: 100%; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; +} + +.error { + color: red; +} + +button[type="submit"] { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button[type="submit"]:hover { + background-color: #45a049; +}