Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: LaunchCodeEducation/HTTP-and-Forms-Studio
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: MamaKit/HTTP-and-Forms-Studio
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Able to merge. These branches can be automatically merged.
  • 3 commits
  • 6 files changed
  • 1 contributor

Commits on Aug 7, 2022

  1. Studio complete.

    MamaKit committed Aug 7, 2022

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    ef3024c View commit details
  2. Completed Bonus Missions.

    MamaKit committed Aug 7, 2022
    Copy the full SHA
    051eeab View commit details

Commits on Aug 9, 2022

  1. Copy the full SHA
    52cedd1 View commit details
Showing with 52 additions and 4 deletions.
  1. +26 −4 index.html
  2. BIN media/ask.png
  3. BIN media/bingbong.png
  4. BIN media/duck.png
  5. BIN media/googleplex.png
  6. +26 −0 styles.css
30 changes: 26 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
@@ -2,18 +2,40 @@

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script>
// TODO: create a handler
window.addEventListener("load", function(){
// TODO: register the handler
});

function setSearchEngine(event) {
// console.log("It works.");
let form = document.getElementById("searchForm");
let selected = document.querySelector("input[name=engine]:checked");
let searchEngine = selected.value;
let actions = {
"google": "https://www.google.com/search",
"duckDuckGo": "https://duckduckgo.com/",
"bing": "https://www.bing.com/search",
"ask": "https://www.ask.com/web"
};
form.setAttribute("action",actions[searchEngine]);
}

window.addEventListener("load", function () {
let form = document.getElementById("searchForm");
form.addEventListener("submit", setSearchEngine);
});
</script>
</head>

<body>

<form id="searchForm">
<!-- TODO: add form elements -->
<label id="query">Search For: <input type="text" name="q" required/></label><br>
<label id="googleplex"><input type="radio" name="engine" value="google" required/><img src="media/googleplex.png" height="100px" alt = "Google"></label>
<label id="duck"><input type="radio" name="engine" value="duckDuckGo"/><img src="media/duck.png" height="100px" alt="DuckDuckGo"></label>
<label id="bingbong"><input type="radio" name="engine" value="bing"/><img src="media/bingbong.png" height="100px" alt="Bing"></label>
<label id="jeeves"><input type="radio" name="engine" value="ask"/><img src="media/ask.png" height="100px" alt="Ask"></label>
<button>Go!</button>
</form>

</body>
Binary file added media/ask.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/bingbong.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/duck.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/googleplex.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
body {
background-color: black;
padding: 50px;
font-family: cursive;
font-size: 20;
}

#query {
color: purple;
}

#duck {
color: yellow;
}

#jeeves {
color: red;
}

#googleplex {
color: white;
}

#bingbong {
color: gray;
}