Dans ce didacticiel, nous allons créer une application Web interactive appelée CodePlay App en utilisant HTML, CSS, JavaScript, Bootstrap et jQuery. Cette application permet aux utilisateurs d'écrire du code en HTML, CSS et JavaScript et de voir le résultat en temps réel dans une iframe intégrée.
Nous nous concentrerons sur la mise en œuvre d'animations fluides, d'une conception réactive et de capacités d'édition de code transparentes.
Pour suivre ce tutoriel, vous devez avoir des connaissances de base en HTML, CSS, JavaScript, Bootstrap et jQuery. Assurez-vous d'avoir installé un éditeur de texte et un navigateur Web moderne.
Créer une structure de projet :
Inclure les bibliothèques requises :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CodePlay App</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<script src="javascript/main.js" type="text/javascript" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">CodePlayer</a>
<div class="ml-lg-5 btn-group btn-group-sm" role="group">
<button type="button" id="html" class="btn btn-secondary active">HTML</button>
<button type="button" id="css" class="btn btn-secondary">CSS</button>
<button type="button" id="javascript" class="btn btn-secondary">JavaScript</button>
<button type="button" id="output" class="btn btn-secondary active">Output</button>
</div>
<button class="navbar-toggler mt-sm-0 mt-2" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2">
<a class="nav-link" href="https://www.linkedin.com/in/daslaw26/">About Me</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link" href="https://github.com/Daslaw/codePlayer.git">DaslawCodePlayer</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container-fluid">
<div class="row" id="bodyContainer">
<textarea id="htmlPanel" class="col panel"><p>Hello world!</p></textarea>
<textarea id="cssPanel" class="col panel hidden">/* Enter your css code here! */</textarea>
<textarea id="javascriptPanel" class="col panel hidden">/* Enter your JS code here! */</textarea>
<iframe id="outputPanel" class="col panel">Hello world!</iframe>
</div>
</main>
<!-- Optional JavaScript; choose one of the two! -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Le fichier CSS (style.css) définit les styles de l'application, y compris la mise en page et la visibilité des panneaux.
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
.inlineMenu {
display: inline;
}
.active {
background-color: green !important;
}
.hidden {
display: none;
}
.panel {
resize: none;
border: none;
outline: none;
border-top: 1.3px solid grey;
transition: opacity 0.5s ease-in-out;
}
.panel:not(:last-child) {
border-right: 1.3px solid grey;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 0.5s;
}
Le fichier JavaScript (main.js) gère le comportement dynamique, notamment la mise à jour du panneau de sortie et la gestion de la visibilité du panneau en fonction de la taille de l'écran.
$(document).ready(function () {
$(".panel").height($(window).height() - $("header").height() - 10);
function updateOutput() {
$("iframe").contents().find("html").html("<html><head><style type='text/css'>" +
$("#cssPanel").val() + "</style></head></body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
}
updateOutput();
$("textarea").on('change keyup paste', function () {
updateOutput();
});
function hideAllPanel() {
$(".btn-group").children().removeClass("active");
$("#bodyContainer").children().addClass("hidden");
}
function mediaChange() {
if (mobileScreen.matches) {
//for small screen devices (max-width: 500px)
hideAllPanel();
$(".btn-group").children(":first-child").addClass("active");
$("#bodyContainer").children(":first-child").removeClass("hidden");
$(".btn-group").children().off("click");
$(".btn-group").children().click(function () {
hideAllPanel();
$(this).toggleClass("active");
let panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
});
}
else if (tabScreen.matches) {
//for medium screen devices (max-width: 800px)
hideAllPanel();
$(".btn-group").children(":first-child").addClass("active");
$("#bodyContainer").children(":first-child").removeClass("hidden");
$(".btn-group").children(":last-child").addClass("active");
$("#bodyContainer").children(":last-child").removeClass("hidden");
let activePanel = ["html", "output"];
$(".btn-group").children().off("click");
$(".btn-group").children().click(function () {
let thisID = $(this).attr("id");
if (this.matches(".active")) {
//when user clicks on active panel button...
$(this).toggleClass("active");
let panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
if (thisID != activePanel[0])
activePanel[1] = activePanel[0];
activePanel[0] = null;
}
else {
//when user clicks on inactive(hidden) panel button...
let selectPanel = activePanel.shift();
$("#" + selectPanel + "Panel").toggleClass("hidden");
$("#" + selectPanel).toggleClass("active");
$(this).toggleClass("active");
let panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
activePanel.push(thisID);
}
});
}
else {
//for other screens...
$(".btn-group").children().off("click");
$(".btn-group").children().click(function () {
$(this).toggleClass("active");
let panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
});
}
}
//media queries; on Screen change.
var mobileScreen = window.matchMedia("(max-width: 500px)");
var tabScreen = window.matchMedia("(max-width: 800px)");
mediaChange();
tabScreen.addEventListener("change", mediaChange);
mobileScreen.addEventListener("change", mediaChange);
});
Félicitations ! Vous avez créé avec succès une application CodePlay qui permet aux utilisateurs d'écrire et de prévisualiser du code HTML, CSS et JavaScript en temps réel avec des animations fluides et une conception réactive pour une utilisation optimale sur différents appareils.
Bon codage !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quels sont les formats vidéo
Utilisation de la fonction sprintf en php
Méthodes et pratiques de traitement audio basées sur Java
Comment utiliser la fonction max
utilisation des instructions mul
Comment référencer CSS en HTML
Comment utiliser le code source d'une page Web PHP
Comment créer une base de données dans MySQL
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
