Assignment Link
%%html
<html>
<head>
<style>
.div1 {
border: 5px outset red;
background-color: white;
text-align: left;
color: black;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 10px;
}
.div2 {
border: 5px outset blue;
background-color: white;
text-align: left;
color: black;
padding-top: 15px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
#changeLinksBtn {
font-size: 14px;
padding: 8px 8px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 8px;
margin-top: 10px;
}
#changeLinksBtn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="div1">
<p title="This is a title" id="text1">Click the below button to change the links from a calculator and a snake game to my previous experimentation with HTML!</p>
<button id="changeLinksBtn">Click Me!</button>
</div>
<div class="div2">
<a id="link1" target="_blank" href="https://gavincopley.github.io/GavinCopley//2023/08/30/Calculator.html">Link to a very useful calculator</a>
<br>
<a id="link2" target="_blank" href="https://gavincopley.github.io/GavinCopley//2023/08/31/Snake_Game.html">Link to a very fun snake game</a>
<p title="This is a title" id="text2">The two above links are <span style="color: blue;">very</span> cool</p>
</div>
<script>
let switched = false;
document.getElementById("changeLinksBtn").addEventListener("click", function() {
if (switched === false) {
document.getElementById("link1").href = "https://gavincopley.github.io/GavinCopley//2023/09/15/Review_Ticket_4_IPYNB_2_.html";
document.getElementById("link2").href = "https://gavincopley.github.io/GavinCopley//2023/09/22/Review_Ticket_5_IPYNB_2_.html";
document.getElementById("link1").textContent = "Link to my first experimentation with HTML";
document.getElementById("link2").textContent = "Link to my second experimentation with HTML";
document.getElementById("text1").innerHTML = "Switched! Click again to go back.<br><br>";
document.getElementById("text2").innerHTML = "The two above links are still <span style='color: red;'>very</span> cool";
} else {
document.getElementById("link1").href = "https://gavincopley.github.io/GavinCopley//2023/08/30/Calculator.html";
document.getElementById("link2").href = "https://gavincopley.github.io/GavinCopley//2023/08/31/Snake_Game.html";
document.getElementById("link1").textContent = "Link to a very useful calculator";
document.getElementById("link2").textContent = "Link to a very fun snake game";
document.getElementById("text1").innerHTML = "Click the below button to change the links from a calculator and a snake game to my previous experimentation with HTML!<br>";
document.getElementById("text2").innerHTML = "The two above links are <span style='color: blue;'>very</span> cool";
}
switched = !switched;
});
</script>
</body>
</html>
Click the below button to change the links from a calculator and a snake game to my previous experimentation with HTML!