我正在嘗試創(chuàng)建一個(gè)類(lèi)似下面github的終端網(wǎng)站: https://github . com/heberleonard 2/terminal-style-portfolio-page
我有兩個(gè)問(wèn)題想解決:
-& gt；我想創(chuàng)建一個(gè)聯(lián)系人部分，它將用戶(hù)輸入，然后使用django框架通過(guò)電子郵件發(fā)送
-& gt；它必須與p和section類(lèi)標(biāo)簽匹配相同的樣式
@javascript
const app = document.querySelector("#app");
// delay the execution of code
const delay = ms => new Promise(res => setTimeout(res, ms));
// Event listener for "Enter" key press
app.addEventListener("keypress", async function(event){
if(event.key === "Enter"){
await delay(150);
// get user input value
getInputValue();
// remove the input field
removeInput();
// delay before creating a new line
await delay(150);
// create a new line
new_line();
}
});
// Event listener for click on the terminal window
app.addEventListener("click", function(event){
// set focus on input field
const input = document.querySelector("input");
input.focus();
});
// initialize the terminal
async function open_terminal(){
createText("Welcome");
await delay(700);
createText("Starting the server...");
await delay(1500);
createText("You can run several commands:");
createCode("about me", "Who am i and what do i do.");
createCode("all", "See all commands.");
createCode("social -a", "All my social networks.");
createCode("skills", "check out my skills");
createCode("contact", "Contact me");
await delay(500);
new_line();
}
// create a new prompt and input field for the user to enter input
function new_line(){
const p = document.createElement("p");
const span1 = document.createElement("span");
const span2 = document.createElement("span");
p.setAttribute("class", "path")
p.textContent = "# user";
span1.textContent = " in";
span2.textContent = " ~/Henry Dumont";
p.appendChild(span1);
p.appendChild(span2);
app.appendChild(p);
const div = document.createElement("div");
div.setAttribute("class", "type")
const i = document.createElement("i");
i.setAttribute("class", "fas fa-angle-right icone")
const input = document.createElement("input");
div.appendChild(i);
div.appendChild(input);
app.appendChild(div);
input.focus();
}
// remove the current input field
function removeInput(){
const div = document.querySelector(".type");
app.removeChild(div);
}
// handle user input
async function getInputValue(){
const value = document.querySelector("input").value;
if(value === "all"){
// display true value
trueValue(value);
// display command examples
createCode("projects", "My github page with my projects. Follow me there ;)");
createCode("about me", "My IT carreer as a Data Analyst adn web developer");
createCode("social -a", "All my social networks.");
createCode("skills", "check out my skills");
createCode("contact", "Contact me");
createCode("clear", "Clean the terminal.");
}
else if(value === "projects"){
trueValue(value);
// display github page
createText("<a target='_blank'><i class='fab fa-github white'></i> github.com/heberleonard2</a>");
}
else if(value === "about me"){
trueValue(value);
// display bio
createText("Hi, I am xxx, a Data/Dev ;)");
createText("I love to do small IT project. I love to explore new technologies and learning them. I mainly use the snake language ;)");
}
else if(value === "social -a"){
trueValue(value);
// display social network links
createText("<a target='_blank'><i class='fab fa-github white'></i> github.com/</a>");
createText("<a target='_blank'><i class='fab fa-linkedin-in white'></i> linkedin.com/in/xxx/</a>")
}
else if(value === "skills"){
trueValue(value);
// display skill description
createText(" Database : SQL Server - MySQL - MongoDB <br> Programming Language: Python - JavaScript - SQL - Django Framework - C# <br> Software : Power BI - Power Automate - SSIS - Azure DevOps <br> WEB : HTML - CSS <br> Operating system : Windows 10 - Linux - Unbuntu - Kali linux ");
}
else if(value === "social"){
trueValue(value);
// display error message if write wrong value
createText("Didn't you mean: social -a?")
}
else if(value === "contact"){
trueValue(value);
// create input fields for message and email
createInput("Please write your message:", "message-field");
createInput("Please write your email:", "email-field");
// select input fields
const messageInput = document.querySelector("#message-field");
const emailInput = document.querySelector("#email-field");
// store message values on enter key press
messageInput.addEventListener("keydown", async function(event) {
if (event.keyCode === 13) {
const messageValue = messageInput.value;
if (messageValue) {
// remove the input field
removeInput(messageInput);
// delay before creating a new line
await delay(150);
// create a new line
new_line();
// set focus on email field
emailInput.focus();
} else {
console.error("Message field cannot be empty.");
}
}
});
// store email values on enter key press
emailInput.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
const emailValue = emailInput.value;
if (emailValue) {
// call Django views to store values
saveValues(messageValue, emailValue);
} else {
console.error("Email field cannot be empty.");
}
}
});
}
else if(value === "clear"){
// Remove every command text when write clear
document.querySelectorAll("p").forEach(e => e.parentNode.removeChild(e));
document.querySelectorAll("section").forEach(e => e.parentNode.removeChild(e));
}
else{
// write wrong command + display command error name
falseValue(value);
createText(`command not found: ${value}`)
}
}
function trueValue(value){
const div = document.createElement("section");
div.setAttribute("class", "type2")
const i = document.createElement("i");
i.setAttribute("class", "fas fa-angle-right icone")
const mensagem = document.createElement("h2");
mensagem.setAttribute("class", "sucess")
mensagem.textContent = `${value}`;
div.appendChild(i);
div.appendChild(mensagem);
app.appendChild(div);
}
function falseValue(value){
const div = document.createElement("section");
div.setAttribute("class", "type2")
const i = document.createElement("i");
i.setAttribute("class", "fas fa-angle-right icone error")
const mensagem = document.createElement("h2");
mensagem.setAttribute("class", "error")
mensagem.textContent = `${value}`;
div.appendChild(i);
div.appendChild(mensagem);
app.appendChild(div);
}
function createText(text, classname){
const p = document.createElement("p");
p.innerHTML =
text
;
app.appendChild(p);
}
function createCode(code, text){
const p = document.createElement("p");
p.setAttribute("class", "code");
p.innerHTML =
`${code} <br/><span class='text'> ${text} </span>`;
app.appendChild(p);
}
// function to send values to django's view
function saveValues(messageValue, emailValue) {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
// display success message to user
createCode("Success", "Your message and email have been saved!");
}
};
xhttp.open("POST", "/", true); // Changed the URL to match Django's URL
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
const data = `message=${encodeURIComponent(messageValue)}&email=${encodeURIComponent(emailValue)}`;
xhttp.send(data);
}
open_terminal();
/*
open_terminal(): This asynchronous function initializes the terminal interface by creating several lines of text and command examples.
new_line(): This function adds a new line to the terminal interface, simulating a new command prompt.
removeInput(): This function removes the current input field from the terminal interface.
getInputValue(): This asynchronous function captures the user's input, checks it against a list of valid commands, and responds accordingly.
trueValue(), falseValue(): These functions are used to display the user's input in the terminal interface, with trueValue() used for valid commands and falseValue() used for invalid commands.
createText(), createCode(): These functions add a line of plain text or a code example to the terminal interface, respectively.*/@CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
}
::-webkit-scrollbar-track
{
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #555;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #555;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rgb(129, 129, 129);
}
.white{
color:rgb(238, 238, 238);
}
.blue{
color:#9CEAF3;
}
a{
text-decoration: none;
color: rgb(238, 238, 238);
}
body{
background-color:#393A59;
height: 100vh;
font-family: 'Fira Code', monospace;
display:flex;
align-items: center;
justify-content: center;
}
.container{
display:flex;
flex-direction: column;
width:100%;
max-width:800px;
height:500px;
overflow: hidden;
border-radius: 6px;
border: 1px solid gray;
margin:20px;
cursor: text;
}
.menu{
display:flex;
align-items: center;
text-align: center;
flex-direction: row;
width: 100%;
height: 24px;
background-color: #424040;
padding: 0 8px;
cursor:default;
}
.menu .button{
width:12px;
height:12px;
border-radius:50%;
margin-right:8px;
cursor:pointer;
}
.red{background-color:#F5544D;}
.yellow{background-color:#FABD2F;}
.green{background-color:#47D043;}
div.title{
flex:1;
text-align:center;
}
.menu h1{
font-size:13px;
color:#9c9c9c;
}
.buttons-flex{
position: absolute;
display:flex;
flex-direction: row;
}
@media (max-width:500px){
.buttons-flex{
position: unset;
display:flex;
flex-direction: row;
}
}
@media (max-width:330px){
.menu h1{
display:none;
}
}
#app{
display:flex;
flex-direction: column;
background-color:#282A35;
width:100%;
height:100%;
padding:8px;
overflow: auto;
}
p{
font-size:16px;
color:rgb(238, 238, 238);
padding:8px 0;
}
h2{
font-size:16px;
color:rgb(238, 238, 238);
}
p.code{
color:#66C2CD;
margin-left:8px;
}
span.text{
margin-left:16px;
color:white;
}
p.path{
color:#F7FCA0;
}
p.path span{
color:#6A77D2;
}
p.path span + span{
color:#9CEAF3;
}
.sucess{
color:#5AD786;
}
.error{
color:#F78F85;
}
p.response{
color:rgb(238, 238, 238);
}
input{
border:none;
background-color: unset;
color:rgb(238, 238, 238);
width:100%;
font-size:16px;
font-family: 'Fira Code', monospace;
}
input:focus{
border:none;
outline: none;
box-shadow: none;
background-color: unset;
}
.type{
display:flex;
align-items: center;
padding:8px 0;
}
.type2{
display:flex;
align-items: center;
padding:8px 0;
}
.icone{
color:#5AD786;
padding-right:8px;
}
.icone.error{
color:#F78F85;
}
/*
Modification made by henry on 20/05/23
*/
input{
font-size:16px;
color:rgb(238, 238, 238);
padding:8px 0;
border:none;
outline: none;
box-shadow: none;
background-color: #282A35;
width:100%;
font-family: 'Fira Code', monospace;
}
input:focus{
border:none;
outline: none;
box-shadow: none;
background-color: #282A35;
}如何在聯(lián)系人部分的html和css中修復(fù)它？ 如何避免在寫(xiě)入聯(lián)系人輸入后被認(rèn)為是錯(cuò)誤的命令？