Skip to content

Instantly share code, notes, and snippets.

@cba85

cba85/cat.html

Created January 22, 2025 15:25
Show Gist options
  • Save cba85/988886155f5646eeba293cb2436df738 to your computer and use it in GitHub Desktop.
Save cba85/988886155f5646eeba293cb2436df738 to your computer and use it in GitHub Desktop.
Download ZIP
2024-2025 IPI Toulouse - jQuery
Raw
cat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
defer
></script>
<script src="cat.js" defer></script>
<style>
body {
max-width: 42em;
margin: 0 auto;
padding: 1em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
}
button {
margin-bottom: 1em;
}
img {
max-width: 100%;
}
.cat {
display: none;
}
</style>
</head>
<body>
<h1>The 🐱 API</h1>
<button>Get a random cat picture</button>
<div class="cat"></div>
</body>
</html>
Raw
cat.js
$("button").on("click", function (e) {
e.preventDefault();
$.get("https://api.thecatapi.com/v1/images/search")
.done(function (data) {
const cat = data[0];
$(".cat").html(`<img src="${cat.url}" />`).show();
})
.fail(function (response) {
console.log(response.responseJSON);
$(
`<p style="color: red">Error: ${response.responseJSON.message}</p>`
).appendTo("body");
});
});
Raw
checkbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
defer
></script>
<script src="checkbox.js" defer></script>
<style>
body {
max-width: 42em;
margin: 0 auto;
padding: 1em;
}
</style>
</head>
<body>
<h1>Checkbox</h1>
<input type="checkbox" name="items[]" id="item1" class="items" />
<label for="item1">Choix 1</label>
<input type="checkbox" name="items[]" id="item2" class="items" />
<label for="item2">Choix 2</label>
<input type="checkbox" name="items[]" id="item3" class="items" />
<label for="item3">Choix 3</label>
<input type="checkbox" name="items[]" id="item4" class="items" />
<label for="item4">Choix 4</label>
<input type="checkbox" name="items[]" id="item5" class="items" />
<label for="item5">Choix 5</label>
</body>
</html>
Raw
checkbox.js
$(".items").on("change", function (e) {
e.preventDefault();
const checked = $(".items:checked").length;
if (checked >= 3) {
$(this).prop("checked", false);
alert("2 choices maximum");
}
});
Raw
dog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
defer
></script>
<script src="dog.js" defer></script>
<style>
body {
max-width: 42em;
margin: 0 auto;
padding: 1em;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<h1>The 🐶 API</h1>
</body>
</html>
Raw
dog.js
$.get("https://dog.ceo/api/breeds/image/random")
.done(function (data) {
console.log(data);
$(`<img src="${data.message}" />`).appendTo("body");
})
.fail(function (response) {
console.log(response.responseJSON);
$(
`<p style="color: red">Error: ${response.responseJSON.message}</p>`
).appendTo("body");
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
defer
></script>
<script src="scripts.js" defer></script>
</head>
<body>
<button class="continue">Bouton</button>
<p>
1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam mollitia
natus, distinctio laborum beatae rerum molestias nemo, sed illo quisquam
eveniet id cupiditate suscipit architecto minus, magnam voluptatem qui
perspiciatis.
</p>
<p>
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nesciunt
harum blanditiis error esse voluptatum dicta minus maxime repudiandae!
Vero alias quae ab unde numquam suscipit accusantium laborum temporibus
in!
</p>
<div class="info">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id est
deserunt harum nam nulla, saepe cumque quos eos illum ullam delectus,
corporis molestias debitis dolorem libero, aut sunt ipsam quas.
</p>
<button>Button</button>
</div>
</body>
</html>
Raw
scripts.js
/*
// Vanilla JS
const buttonElement = document.querySelector(".continue");
buttonElement.innerHTML = "Next step...";
document.querySelector("button .continue").innerHTML = "Next step...";
// jQuery
$("button .continue").html("Next step...");
*/
/*
// Useless à cause de "defer"
$(document).ready(function () {
// Code
});
*/
console.log($());
const paragraphs = $("p");
console.log(paragraphs);
const firstParagraph = $("p").first();
console.log(firstParagraph);
console.log($(".info").has("button"));
const buttonElement = $("button").first();
buttonElement.fadeOut(1000);
Raw
validation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
defer
></script>
<script src="validation.js" defer></script>
<style>
body {
max-width: 42em;
margin: 0 auto;
padding: 1em;
}
form div {
margin-bottom: 1em;
}
input {
outline: none;
}
.error {
display: none;
}
</style>
</head>
<body>
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<span class="error"></span>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<span class="error"></span>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Raw
validation.js
$("form").on("submit", function (e) {
e.preventDefault();
const emailElement = $("#email");
const emailValue = emailElement.val().trim();
if (!emailValue) {
emailElement.css("border", "1px solid red");
emailElement
.next(".error")
.css("color", "red")
.text("Email is required")
.fadeIn("slow");
} else if (!emailValue.match(/^[\w\-\.]+@([\w-]+\.)+[\w-]{2,}/)) {
emailElement
.next(".error")
.hide()
.css("color", "red")
.text("Email is invalid")
.slideDown("slow");
} else {
emailElement.css("border", "");
emailElement.next(".error").hide();
}
const passwordElement = $("#password");
const passwordValue = $("#password").val().trim();
if (!passwordValue) {
passwordElement.css("border", "1px solid red");
passwordElement
.next(".error")
.css("color", "red")
.text("Password is required")
.fadeIn("slow");
} else if (passwordValue.length <= 8) {
passwordElement
.next(".error")
.hide()
.css("color", "red")
.text("Password must be 8 characters min")
.slideDown("slow");
} else {
passwordElement.css("border", "");
passwordElement.next(".error").hide();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment