diff --git a/Exercise 0/FavouriteThings.txt b/Exercise 0/FavouriteThings.txt new file mode 100644 index 00000000..9dec3401 --- /dev/null +++ b/Exercise 0/FavouriteThings.txt @@ -0,0 +1,5 @@ +Name: Rudra Patel + +Favorite Movie: Avengers Infinity War + +Name of favorite music: Thick of it diff --git a/Exercise 1 - HTML/On The Flip - The Grey Room _ Density & Time.mp3 b/Exercise 1 - HTML/On The Flip - The Grey Room _ Density & Time.mp3 new file mode 100644 index 00000000..125839bc Binary files /dev/null and b/Exercise 1 - HTML/On The Flip - The Grey Room _ Density & Time.mp3 differ diff --git a/Exercise 1 - HTML/Supermanflying.png b/Exercise 1 - HTML/Supermanflying.png new file mode 100644 index 00000000..fba30f39 Binary files /dev/null and b/Exercise 1 - HTML/Supermanflying.png differ diff --git a/Exercise 1 - HTML/exercise1.html b/Exercise 1 - HTML/exercise1.html new file mode 100644 index 00000000..8938754c --- /dev/null +++ b/Exercise 1 - HTML/exercise1.html @@ -0,0 +1,112 @@ + + + + Exercise 1 + + + + +

Exercise 1

+

9/14/2025

+

+

Facts about me!

+ + + + + + + + + + + + + + + + +
First nameLast nameFavorite Movie ImageFavorite music audio sampleFavorite Video Sample:
RudraPatel + A image of superman + + + + +
+

Enter your details below

+
+ +

+ + +

+ + +

+

Available meeting days

+ + + + + + + + + + + + + + + + + + + + +


+ + +

+ +

Currently working on new website?

+ + + + + +


+ +

Enter comments here:

+ +

+ + + +
+ + diff --git a/Exercise 2 - CSS/exercise2.html b/Exercise 2 - CSS/exercise2.html new file mode 100644 index 00000000..dc596695 --- /dev/null +++ b/Exercise 2 - CSS/exercise2.html @@ -0,0 +1,86 @@ + + + + Hockey Tourament Info + + + + +

Annual Hockey Team Tourament 2025

+ +

+ Join us for an action-packed weekend as top local teams compete for glory + and the championship cup. Both teams have remained undefeated until now! +

+ + + + + + + + + + + + + +
Where it's happeningDateWho is invitied
City National Arena & America First Center of Las Vegas NevadaDecember 21-26 2025All hockey fans are welcome!
+ +
Contact us at (206) 342-8631
+ + Image of hockey + + Explore out website + +
+ +
+
+ +

+ + +

+ +

+ + + Male + Female
+
+ + +
+ +

This is our favorite music

+ + +
+ + +
+ + diff --git a/Exercise 2 - CSS/exercise2style.css b/Exercise 2 - CSS/exercise2style.css new file mode 100644 index 00000000..c394873c --- /dev/null +++ b/Exercise 2 - CSS/exercise2style.css @@ -0,0 +1,75 @@ +h1{ + text-align: center; +} + +#info{ + font-family:'Times New Roman', Times, serif; + font-size: 15px; + font-weight: bold; + background-color:rgb(235, 144, 144); + padding:5px; +} + +table{ + width: 80%; + margin:40px; + font-family: Arial, sans-serif; + box-shadow: 5px 5px 5px rgba(0,0,0,0.1); +} + +#contact{ + border: 3px solid; + height:40px; + width:100px; + text-align: center; + font-weight:bold; + font-size: 15px; + background-color: paleturquoise; + margin: 20px; + + animation: mover; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-delay: 1s; + animation-timing-function: ease; +} + +@keyframes mover{ + from{margin-left:0%;} + to{margin-left:100%;} +} + +img{ + float:right; + position:relative; + top:10px; +} + +a{ + position:relative; + top:10px; +} + +form{ + position:relative; + top:30px; +} + +#music{ + position: relative; + top:70px; +} + +audio{ + position:relative; + top:60px; +} + +#video{ + position: relative; + top: 100px; +} + +body{ + background-color:azure +} \ No newline at end of file diff --git a/Exercise 3 - Advanced CSS/exercise3.html b/Exercise 3 - Advanced CSS/exercise3.html new file mode 100644 index 00000000..686f01cb --- /dev/null +++ b/Exercise 3 - Advanced CSS/exercise3.html @@ -0,0 +1,127 @@ + + + + + + + Exercise 3 + + + +

Exercise 3 by Rudra Patel

+
Date submitted: October 15th 2025
+
+

Fun facts about me

+ + + + + + + + + + + + + + + + +
First NameLast NameFavorite MovieFavorite songFavorite video
RudraPatel + Image of avengers + + + + +
+ +
+ +

Enter your details below

+
+
+
+
+ +
+
+ +
+ + +

Available meeting days

+ + + + + + + + + + + + + + +

+ +
+ + +

Working on a new project?

+ + + + + +

If yes enter the project you are working on

+
+ + + +
+ + diff --git a/Exercise 3 - Advanced CSS/exercise3style.css b/Exercise 3 - Advanced CSS/exercise3style.css new file mode 100644 index 00000000..4778fae1 --- /dev/null +++ b/Exercise 3 - Advanced CSS/exercise3style.css @@ -0,0 +1,83 @@ +h1{ + text-align:center; + font-size:20px; + +} + +h5{ + text-align:center; +} + +#facts{ + text-align:center; +} + +table { + width: 90%; + margin: 20px auto; + border-collapse: collapse; + font-family: Arial, sans-serif; + text-align: center; + background-color: #fafafa; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); +} + +th, td{ + border: 1px solid #ddd; + padding: 10px; + vertical-align: middle; +} + +#details{ + text-align:center; +} + +#box1{ + width:410px; + height:500px; + border: 2px solid; + transform: translateX(100%); +} + +form{ + position:absolute; + top:650px; + left:430px; +} + + + +@media only screen and (min-width:600px){ + body{ + background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20240919/pngtree-a-background-of-orange-blue-and-yellow-gradients-with-gritty-appearance-image_16233934.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} +} + +@media only screen and (max-width:599px){ + body{ + background-image: url("https://t4.ftcdn.net/jpg/04/89/68/23/360_F_489682374_ckc0OVyT6Av0NGcuYbwBSCxy62blF4CQ.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color:green; +} +form{ + display:none +} + +table, thead, tbody, th, td, tr { + display: block; /* makes every row and cell block-level */ + width: 100%; /* full width */ + } +#details{ + display:none; +} +#box1{ + display:none +} + + +} \ No newline at end of file diff --git a/Exercise 4 - Bootstrap/bootstrap_exercise.html b/Exercise 4 - Bootstrap/bootstrap_exercise.html new file mode 100644 index 00000000..8518fa4f --- /dev/null +++ b/Exercise 4 - Bootstrap/bootstrap_exercise.html @@ -0,0 +1,277 @@ + + + + + + Exercise 4: Bootstrap + + + + + + + + + + + + + +
+
+
+
+

Welcome to My Portfolio

+

+ My name is Rudra Patel, and I'm an intern at Building-U! +

+ + View My Work + +
+ +
+ Landscape hero image +
+
+
+
+ + +
+

About Me

+
+
+
+
+ University engineering building +
+
About Rudra
+

Rudra is an intern at Building-U.

+ +
+
+
+ +
+
+ CSS project preview +
+
Rudra's CSS Project
+

+ Used CSS properties to create a website. +

+ +
+
+
+ +
+
+ HTML project preview +
+
Rudra's HTML Project
+

+ Used HTML properties to create a website. +

+ +
+
+
+
+
+
+ + +
+
+

Skills & Achievements

+
+
HTML
+
CSS
+
Bootstrap
+
+
+
+ + +
+
+

Book a meeting with Building U

+

We are always ready to help!

+ +
+
+
+ + + + + + + + + + + + + +
+
+
+
+
+ + + + + + + + + + + + + diff --git a/Exercise 5 - JavaScript/javascript_exercise.js b/Exercise 5 - JavaScript/javascript_exercise.js new file mode 100644 index 00000000..89ea113d --- /dev/null +++ b/Exercise 5 - JavaScript/javascript_exercise.js @@ -0,0 +1,56 @@ +function formValidator(firstName, lastName, age, phoneNumber){ + let isAllowed = true; + let emptyVars = [] + if (firstName === undefined){ + emptyVars.push("First name"); + isAllowed = false; + } + if (lastName === undefined){ + emptyVars.push("Last name"); + isAllowed = false; + } + if (age === undefined){ + emptyVars.push("Age"); + isAllowed = false; + } + if (phoneNumber === undefined){ + emptyVars.push("Phone number"); + isAllowed = false; + } + + if (emptyVars.length > 0){ + console.log(`Please enter the following parameters as they are missing: ${emptyVars}`); + } + + if (typeof firstName !== "string"){ + if (firstName !== undefined){ + console.log("The first name should be a string"); } + isAllowed = false; + } + if (typeof lastName !== "string"){ + if (lastName !== undefined){ + console.log("The last name should be a string");} + isAllowed = false; + } + if (typeof phoneNumber !== "string"){ + if (phoneNumber !== undefined){ + console.log("The phone number should be a string");} + isAllowed = false; + } + if (!Number.isFinite(age)){ + if (age !== undefined){ + console.log("The age should be a number");} + isAllowed = false; + } + else{ + if (age < 18){ + console.log("Sorry, not old enough for our app."); + isAllowed = false; + } + } + if (isAllowed){ + console.log("WELCOME TO THE ADOS APP."); + } +} + +formValidator(); \ No newline at end of file diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.css b/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.css new file mode 100644 index 00000000..de88b53e --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.css @@ -0,0 +1,19 @@ +h1{ + color: grey; + text-align: center; + border-style: dotted; + border-color: black; + border-radius: 10px; + padding: 5px; +} + +#first_name, #last_name, #phone_number, #age { + font-size:14px; + font-family:Georgia, 'Times New Roman', Times, serif; + font-weight:bold; + text-decoration:underline; +} + +body{ + background-color: azure; +} \ No newline at end of file diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.html b/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.html new file mode 100644 index 00000000..70d273cd --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.html @@ -0,0 +1,40 @@ + + + + + JavaScript and the Dom Exercise, Part 1 + + + + +

Form validator App

+ +
+ +

+ + +

+ + +

+ + +
+ +
+ + + diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.js b/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.js new file mode 100644 index 00000000..ee7b96eb --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise1.js @@ -0,0 +1,92 @@ +const firstNameInput = document.querySelector("#first_name_input"); + +const lastNameInput = document.querySelector("#last_name_input"); + +const phoneNumberInput = document.querySelector("#phone_number_input"); + +const ageInput = document.querySelector("#age_input"); + +function formValidator(firstName, lastName, age, phoneNumber){ + + let isAllowed = true; + let emptyVars = [] + if (firstName === undefined){ + emptyVars.push("First name"); + isAllowed = false; + } + if (lastName === undefined){ + emptyVars.push("Last name"); + isAllowed = false; + } + if (age === undefined){ + emptyVars.push("Age"); + isAllowed = false; + } + if (phoneNumber === undefined){ + emptyVars.push("Phone number"); + isAllowed = false; + } + + if (emptyVars.length > 0){ + console.log(`Please enter the following parameters as they are missing: ${emptyVars}`); + alert(`Please enter the following parameters as they are missing: ${emptyVars}`) + } + + if (typeof firstName !== "string"){ + if (firstName !== undefined){ + console.log("The first name should be a string"); + alert("The first name should be a string") + } + + isAllowed = false; + } + if (typeof lastName !== "string"){ + if (lastName !== undefined){ + console.log("The last name should be a string"); + alert("The first name should be a string") + } + + isAllowed = false; + } + if (typeof phoneNumber !== "string"){ + if (phoneNumber !== undefined){ + console.log("The phone number should be a string"); + alert("The phone number should be a string") + } + isAllowed = false; + } + age = Number(age); + if (!Number.isFinite(age)){ + if (age !== undefined){ + console.log("The age should be a number") + alert("The age should be a number"); + } + isAllowed = false; + + } + else{ + if (age < 18){ + console.log("Sorry, not old enough for our app.") + alert("Sorry, not old enough for our app."); + isAllowed = false; + } + } + if (isAllowed){ + console.log("WELCOME TO THE ADOS APP."); + } +} + +// the anonymous function (arrow function) waits for the click to happen, then it runs +// use an arror function with the function for the addEventListener if parameters are needed, +// if their aren't any parameters then use the function name +button = document.querySelector("button"); +button.addEventListener("click", () => { + const firstNameValue = firstNameInput.value || undefined; + const lastNameValue = lastNameInput.value || undefined; + const phoneNumberValue = phoneNumberInput.value || undefined; + const ageValue = ageInput.value === "" ? undefined : Number(ageInput.value); + + formValidator(firstNameValue, lastNameValue, ageValue, phoneNumberValue); +}) + +// formValidator(firstNameValue, lastNameValue, phoneNumberValue, ageValue); \ No newline at end of file diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.css b/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.css new file mode 100644 index 00000000..80abb71c --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.css @@ -0,0 +1,30 @@ +h1{ + text-align:center; + color: burlywood; + border-style:ridge; + border-color:grey; + border-width:5px; + border-radius:10px; +} + +body{ + background-color:azure; +} + +#Name, #Age, #Gender, #Position{ + color:burlywood; + text-decoration:underline; +} + +#Button{ + color:black; + background-color:blanchedalmond; +} + +#employee_details{ + transform: translate(550px, -200px); +} + +#storage{ + transform: translate(550px, -180px); +} \ No newline at end of file diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.html b/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.html new file mode 100644 index 00000000..8b9253a1 --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.html @@ -0,0 +1,35 @@ + + + + + JavaScript and the Dom Exercise, Part 2 + + + + +

Employee Entry App

+ +
+ +

+ + +

+ + +

+ + +

+ + +
+

Employee Details

+
    + + + diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.js b/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.js new file mode 100644 index 00000000..22496859 --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise2.js @@ -0,0 +1,41 @@ +const nameInput = document.querySelector("#name_input"); +const ageInput = document.querySelector("#age_input"); +const genderInput = document.querySelector("#gender_input"); +const positionInput = document.querySelector("#position_input"); + +const unordered_list = document.querySelector("#storage"); +function add_details(name, age, gender, position){ + const item = document.createElement("li"); + const text = document.createElement("span"); + text.textContent = `${name} is ${age} years old, and is a ${gender}, and a ${position}`; + const editButton = document.createElement("button"); + editButton.textContent = "Edit"; + const deleteButton = document.createElement("button"); + deleteButton.textContent = "Delete"; + item.appendChild(text); + item.appendChild(editButton); + item.appendChild(deleteButton); + unordered_list.appendChild(item); + + deleteButton.addEventListener("click", () => { + unordered_list.removeChild(item); + }) + + editButton.addEventListener("click", () => { + const newName = prompt("Enter new name:"); + const newAge = prompt("Enter new age:"); + const newGender = prompt("Enter new gender:"); + const newPosition = prompt("Enter new position:"); + text.textContent = `${newName} is ${newAge} years old, and is a ${newGender}, and a ${newPosition}`; + }) +} + +add_entry = document.querySelector("#add_Button"); +add_entry.addEventListener("click", () => { + const name_value = nameInput.value || undefined; + const age_value = ageInput.value || undefined; + const gender_value = genderInput.value || undefined; + const position_value = positionInput.value || undefined; + + add_details(name_value, age_value, gender_value, position_value); +}) \ No newline at end of file diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.css b/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.css new file mode 100644 index 00000000..a60b5493 --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.css @@ -0,0 +1,4 @@ +h1{ + color:grey; + text-align:center; +} \ No newline at end of file diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.html b/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.html new file mode 100644 index 00000000..9371facb --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.html @@ -0,0 +1,20 @@ + + + + + JavaScript and the Dom Exercise, Part 3 + + + + +

    API App

    +
    + + +

    +
    + +
    Weight:
    + + + diff --git a/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.js b/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.js new file mode 100644 index 00000000..d90335d1 --- /dev/null +++ b/Exercise 6 - JavaScript and the Dom/jsDom_exercise3.js @@ -0,0 +1,21 @@ +input = document.querySelector("#Input"); +button = document.querySelector("#search_button"); +div = document.querySelector("#display_details"); + +button.addEventListener("click", () =>{ + fetch(`https://pokeapi.co/api/v2/pokemon/${input.value}`) + .then(response => { + if (!response.ok){ + throw new Error("Could not fetch resource"); + } + return response.json(); + }) + .then(data => printDetail(data.weight)) + .catch(error => console.error(error)); +}) + +function printDetail(data){ + info = document.createElement("p"); + info.textContent = data; + div.appendChild(info); +} \ No newline at end of file diff --git a/Exercise 7 - React/Download b/Exercise 7 - React/Download new file mode 100644 index 00000000..cd4f1514 --- /dev/null +++ b/Exercise 7 - React/Download @@ -0,0 +1,28 @@ +{ + "name": "react-lesson", + "private": true, + "version": "1.0.0", + "type": "module", + "scripts": { + "dev:useState": "cross-env VITE_REACT_CHALLENGE=useState vite", + "dev:useRef": "cross-env VITE_REACT_CHALLENGE=useRef vite", + "dev:useEffect": "cross-env VITE_REACT_CHALLENGE=useEffect vite", + "dev:useContext": "cross-env VITE_REACT_CHALLENGE=useContext vite", + "dev:useReducer": "cross-env VITE_REACT_CHALLENGE=useReducer vite", + "dev:useMemo": "cross-env VITE_REACT_CHALLENGE=useMemo vite", + "dev:final": "cross-env VITE_REACT_CHALLENGE=final vite", + "dev": "vite" + }, + "dependencies": { + "react": "^18", + "react-dom": "^18", + "uuid": "^10" + }, + "devDependencies": { + "@types/react": "^18", + "@types/react-dom": "^18", + "@vitejs/plugin-react": "~4.3.0", + "cross-env": "^7.0.3", + "vite": "~6.2.0" + } +}