文章詳情頁

程序猿說love的100種語言

瀏覽：353日期：2022-06-03 08:10:53

說程序猿是直男，不可否認，大多數程序猿都挺直，因為我們沒有那么多彎彎繞繞，有心思兜圈子，不如回去寫幾行代碼………

程序猿的時間大多都給了工作和學習，但是可能比一般人更缺少愛情。程序猿也許在生活中會比較宅，但是千萬不要說程序猿不懂浪漫。當你不開心了，他可以分分鐘做出100種“我愛你”的愛意語言給你制造小驚喜…

這里的語言不是指編程語言，指的是各個國家語言。前端程序猿工程師制作的一百種語言的LOVE，網頁代碼如下：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CodePen - 100 List items: Love translations ?</title>
 
    <link rel="stylesheet" href="css/style.css" rel="external nofollow"  />
  </head>
  <body>
    <dl id="list-group"></dl>
 
    <div id="modal"></div>
 
    <script src="js/script.js"></script>
  </body>
</html>

html頁面代碼很簡單，上面引入了css文件夾下的樣式文件style.css；下面引入了js文件夾下的js腳本script.js

style.css

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    overflow-x: hidden;
    background-image: -webkit-gradient(linear,
right bottom, left top,
from(#ffadad),
color-stop(#ffd6a5), 
color-stop(#fdffb6),
color-stop(#caffbf),
color-stop(#9bf6ff),
color-stop(#a0c4ff),
to(#bdb2ff));
    background-image: linear-gradient(to top left,
#ffadad,
#ffd6a5, 
#fdffb6,
#caffbf,
#9bf6ff,
#a0c4ff,
#bdb2ff);
    color: #5d5865;
}
 
#list-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.5rem; gap: 0.5rem;
    padding: 1rem;
}
 
.item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.3), transparent, rgba(255,255,255,0.3));
    border-radius: 2rem;
    padding: 3rem 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
 
.item::before,
.item::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 3rem;
    height: 3rem;
}
 
.item::before {
    bottom: 1rem; left: 1rem;
    border-radius: 0 0 0 1rem;
    background-image: linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, 0.5));
}
 
.item::after {
    top: 1rem; right: 1rem;
    border-radius: 0 1rem 0 0;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5));
}
 
.item:hover,
.item:focus,
.item:active {
    background-color: white;
    outline: none;
}
 
dt {
    text-align: right;
    font-family: "Great Vibes", serif;
    font-size: 3rem;
}
 
dt.smaller {
    font-size: 1.8rem;
}
 
dt.medium {
    font-size: 2.1rem;
}
 
dt.smaller,
dt.medium {
    font-style: italic;   
}
 
.italic {
    font-style: italic;
}
 
dd {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
}
 
dd, dt {
    pointer-events: none;
}
 
#modal {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    left: 2rem; top: 2rem; right: 2rem; bottom: 2rem;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 5rem rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: white;
}
 
#modal.active {
    min-height: 15rem;
    display: -webkit-box;
    display: flex;
    position: fixed;
    z-index: 2;
    -webkit-animation: openModal 0.2s;
    animation: openModal 0.2s;
}
 
#modal .lang-name {
    position: relative;
    z-index: 4;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    text-transform: capitalize;
}
 
#modal h1 {
    position: relative;
    z-index: 1;
    font-family: "Great Vibes", serif;
    font-size: 10rem;
    line-height: 1.3;
}
 
#modal h1.smaller {
    font-size: 5rem;
}
 
#modal h1.medium {
    font-size: 7.5rem;
}
 
#modal h1::after,
#modal h1::before { /* modal heart shapes */
    content: "";
    position: absolute;
    bottom: 50%; left: 50%;
    -webkit-transform: translateX(-50%) translateY(52%);
    transform: translateX(-50%) translateY(52%);
    -webkit-clip-path: polygon(50% 10%, 66% 0, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 33% 0);
    clip-path: polygon(50% 10%, 66% 0, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 33% 0);
}
 
#modal h1::before {
    z-index: -2;
    background-color: lightcoral;
    opacity: 0.5;
    width: 10rem;
    height: 10rem;
    border-radius: 3rem 3rem 6rem 6rem;
}
 
#modal h1::after {
    z-index: -1;
    background-color: lightcoral;
    opacity: 0.3;
    width: 12rem;
    height: 12rem;
    border-radius: 3rem 3rem 6rem 6rem;
}
 
#modal-close-btn {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 2rem; height: 2rem;
    text-align: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    background-color: transparent;
    border: 1px solid rgba(93, 88, 101, 0.5);
    border-radius: 0.5rem;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}
 
#modal-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(93, 88, 101, 0.8);
}
 
button {
    cursor: pointer;
}
 
/* tablet styles */
@media screen and (max-width: 959px) {
    #list-group {
grid-template-columns: repeat(4, 1fr);
    }
    
    #modal {
left: 1rem; top: 1rem; right: 1rem; bottom: 1rem;
    }
}
 
@media screen and (max-width: 759px) {
    #list-group {
grid-template-columns: repeat(3, 1fr);
    }
 
    #modal h1 {
font-size: 7rem;
line-height: 1.3;
    }
    
    #modal h1.smaller {
font-size: 3rem;
    }
    
    #modal h1.medium {
font-size: 4.4rem;
    }
 
    #modal {
left: 0.75rem; top: 0.75rem; right: 0.75rem; bottom: 0.75rem;
    }
}
 
@media screen and (max-width: 639px) {
    #list-group {
grid-template-columns: repeat(2, 1fr);
    }
 
    #modal h1 {
font-size: 5rem;
line-height: 1.3;
    }
    
    #modal h1.smaller {
font-size: 2rem;
    }
    
    #modal h1.medium {
font-size: 3.3rem;
    }
 
    #modal {
left: 0.5rem; top: 0.5rem; right: 0.5rem; bottom: 0.5rem;
    }
}
 
@-webkit-keyframes openModal { /* subtle fade in for modal */
    from {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
    } to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
    }
}
 
@keyframes openModal { /* subtle fade in for modal */
    from {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
    } to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
    }
}

script.js

const dl = document.getElementById("list-group");
const modal = document.getElementById("modal");
 
dl.addEventListener("click", openModal);
 
function populateList() {
 
    let output = "";
 
    loveTranslations.forEach((love) => {
// conditionals to change font sizes & style for larger words & langauge by adding a class to the <dt>
if (love.language === "georgian" || love.language === "malayalam" || love.language === "tatar") {
 
    output += `<div tabindex="0">
<dt>${love.word}</dt>
<dd>${love.language}</dd>
    </div>`;
 
} else if (to_medium.includes(love.language) === true) {
 
    output += `<div tabindex="0">
<dt>${love.word}</dt>
<dd>${love.language}</dd>
    </div>`;
 
} else if (to_italic.includes(love.language) === true) {
 
    output += `<div tabindex="0">
<dt>${love.word}</dt>
<dd>${love.language}</dd>
    </div>`;
 
} else {
 
    output += `<div tabindex="0">
<dt>${love.word}</dt>
<dd>${love.language}</dd>
    </div>`;
 
}
 
    });
 
    dl.innerHTML = output;
}
 
function openModal(e) {
    if (e.target.nodeName.toLowerCase() === "dl") { return; }
    else if (e.target.classList.contains("item") === true) {
 
const lang = e.target.children[1].innerText.toLowerCase();
 
modal.classList.toggle("active");
 
if (to_italic.includes(lang) === true) { // conditional to change font size for different word sizes and lettering styles, adding classes to h1
 
    modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button>
    <h1>${e.target.children[0].innerText}</h1>
    <p>${e.target.children[1].innerText}</p>`;
 
} else if (to_medium.includes(lang) === true) {
 
    modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button>
    <h1>${e.target.children[0].innerText}</h1>
    <p>${e.target.children[1].innerText}</p>`;
} else if (lang === "georgian" || lang === "malayalam" || lang === "tatar") {
    modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button>
    <h1>${e.target.children[0].innerText}</h1>
    <p>${e.target.children[1].innerText}</p>`;
 
} else {
 
    modal.innerHTML += `<button onclick="closeModal()" id="modal-close-btn">X</button>
    <h1>${e.target.children[0].innerText}</h1>
    <p>${e.target.children[1].innerText}</p>`;
}
    }
}
 
function closeModal() {
    document.getElementById("modal").classList.toggle("active");
    modal.innerHTML = ""; // clearing out the modal text
}
 
// 100 love translatons: Object Array
const loveTranslations = [
    {
"language": "english",
"word": "love"
    },
    {
"language": "spanish",
"word": "amor"
    },
    {
"language": "french",
"word": "l"amour"
    },
    {
"language": "dutch",
"word": "liefde"
    },
    {
"language": "greek",
"word": "αγ?πη"
    },
    {
"language": "Arabic",
"word": "??"
    },
    {
"language": "albanian",
"word": "dashuri"
    },
    {
"language": "amharic",
"word": "???"
    },
    {
"language": "armenian",
"word": "???"
    },
    {
"language": "azerbaijani",
"word": "sevgi"
    },
    {
"language": "basque",
"word": "maitasuna"
    },
    {
"language": "belarusian",
"word": "каханне"
    },
    {
"language": "bengali",
"word": "???????"
    },
    {
"language": "bosnian",
"word": "ljubavi"
    },
    {
"language": "bulgarian",
"word": "любов"
    },
    {
"language": "catalan",
"word": "amor"
    },
    {
"language": "cebuano",
"word": "gugma"
    },
    {
"language": "chinese",
"word": "愛"
    },
    {
"language": "corsican",
"word": "amore"
    },
    {
"language": "croatian",
"word": "ljubav"
    },
    {
"language": "czech",
"word": "milovat"
    },
    {
"language": "danish",
"word": "elsker"
    },
    {
"language": "esperanto",
"word": "amo"
    },
    {
"language": "estonian",
"word": "armastus"
    },
    {
"language": "filipino",
"word": "pag-ibig"
    },
    {
"language": "finnish",
"word": "rakkaus"
    },
    {
"language": "frisian",
"word": "leafde"
    },
    {
"language": "galician",
"word": "amor"
    },
    {
"language": "georgian",
"word": "?????????"
    },
    {
"language": "german",
"word": "liebe"
    },
    {
"language": "gujarati",
"word": "?????"
    },
    {
"language": "haitian creole",
"word": "lanmou"
    },
    {
"language": "hausa",
"word": "soyayya"
    },
    {
"language": "hawaiian",
"word": "aloha"
    },
    {
"language": "hebrew",
"word": "????"
    },
    {
"language": "hindi",
"word": "?????"
    },
    {
"language": "hmong",
"word": "kev hlub"
    },
    {
"language": "hungarian",
"word": "szeretet"
    },
    {
"language": "icelandic",
"word": "ást"
    },
    {
"language": "igbo",
"word": "ihunanya"
    },
    {
"language": "indonesian",
"word": "cinta"
    },
    {
"language": "irish",
"word": "grá"
    },
    {
"language": "italian",
"word": "amore"
    },
    {
"language": "japanese",
"word": "愛"
    },
    {
"language": "javanese",
"word": "katresnan"
    },
    {
"language": "kannada",
"word": "??????"
    },
    {
"language": "kazakh",
"word": "махаббат"
    },
    {
"language": "khmer",
"word": "???????"
    },
    {
"language": "kiryarwanda",
"word": "urukundo"
    },
    {
"language": "korean",
"word": "??"
    },
    {
"language": "kurdish",
"word": "ev?n"
    },
    {
"language": "kyrgyz",
"word": "с?й??"
    },
    {
"language": "lao",
"word": "???"
    },
    {
"language": "latin",
"word": "amare"
    },
    {
"language": "latvian",
"word": "mīlestība"
    },
    {
"language": "lithuanian",
"word": "meil?"
    },
    {
"language": "luxembourish",
"word": "Léift"
    },
    {
"language": "macedonian",
"word": "убов"
    },
    {
"language": "malagasy",
"word": "fitiavana"
    },
    {
"language": "malay",
"word": "cinta"
    },
    {
"language": "malayalam",
"word": "??????"
    },
    {
"language": "maltese",
"word": "im?abba"
    },
    {
"language": "moari",
"word": "aroha"
    },
    {
"language": "marathi",
"word": "?????"
    },
    {
"language": "mongolian",
"word": "хайр"
    },
    {
"language": "burmese",
"word": "aahkyit"
    },
    {
"language": "nepali",
"word": "????"
    },
    {
"language": "norwegian",
"word": "kj?rlighet"
    },
    {
"language": "odia",
"word": "?????"
    },
    {
"language": "pashto",
"word": "????"
    },
    {
"language": "persian",
"word": "???"
    },
    {
"language": "polish",
"word": "mi?o??"
    },
    {
"language": "portuguese",
"word": "amar"
    },
    {
"language": "punjabi",
"word": "????"
    },
    {
"language": "romanian",
"word": "dragoste"
    },
    {
"language": "russian",
"word": "люблю"
    },
    {
"language": "samoan",
"word": "alofa"
    },
    {
"language": "scots gaelic",
"word": "ghaoil"
    },
    {
"language": "serbian",
"word": "?убав"
    },
    {
"language": "sesotho",
"word": "lerato"
    },
    {
"language": "shona",
"word": "rudo"
    },
    {
"language": "sindhi",
"word": "????"
    },
    {
"language": "sinhala",
"word": "????"
    },
    {
"language": "slovak",
"word": "láska"
    },
    {
"language": "slovinian",
"word": "ljubezen"
    },
    {
"language": "somali",
"word": "jacayl"
    },
    {
"language": "sudanese",
"word": "bogoh"
    },
    {
"language": "swahili",
"word": "upendo"
    },
    {
"language": "swedish",
"word": "k?rlek"
    },
    {
"language": "tamil",
"word": "?????"
    },
    {
"language": "tatar",
"word": "м?х?бб?т"
    },
    {
"language": "telugu",
"word": "?????"
    },
    {
"language": "thai",
"word": "???"
    },
    {
"language": "turkish",
"word": "a?k"
    },
    {
"language": "turkmen",
"word": "s?ygi"
    },
    {
"language": "ukranian",
"word": "кохання"
    },
    {
"language": "urdu",
"word": "????"
    },
    {
"language": "vietnamese",
"word": "yêu"
    },
    {
"language": "yiddish",
"word": "????"
    },
    {
"language": "zulu",
"word": "uthando"
    }
];
 
// array of languages that the characters need to italicised
const to_italic = ["hebrew", "hindi", "korean", "kannada", "lao", "macedonian", "mongolian", "nepali", "odia", "russian", "serbian", "telugu", "thai", "marathi"];
 
// array of languages that need to reduced in font size
const to_medium = ["belarusian", "bengali", "greek", "armenian", "bulgarian", "gujarati", "khmer", "kazakh", "kyrgyz", "punjabi", "tamil", "ukranian"];
 
populateList();

到此這篇關于程序猿說love的100種語言的文章就介紹到這了,更多相關用100種語言說我愛你內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！

上一條：前端html+css實現動態生日快樂代碼下一條：阿里前端開發中的規范要求

排行榜

					
					正則表達式匹配${key}并在Java中使用的詳細方法
Python通過fnmatch模塊實現文件名匹配
python 解決pycharm運行py文件只有unittest選項的問題
低版本IE正常運行HTML5+CSS3網站的3種解決方案
log4net在Asp.net MVC4中的使用過程
解決vue scoped scss 無效的問題
基于Java實現簡單貪吃蛇游戲
python+adb+monkey實現Rom穩定性測試詳解
關于python中readlines函數的參數hint的相關知識總結
springboot用controller跳轉html頁面的實現
Android Studio 4.0 正式發布在Ubuntu 20.04中安裝的方法
				