以下が、HTML、CSS、JavaScriptを使った「お嬢様言葉変換アプリ」です。
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>お嬢様言葉変換アプリ</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>お嬢様言葉変換アプリ</h1>
<div class="container">
<label for="textInput">お嬢様言葉に変換する文章を入力してください：</label>
<textarea id="textInput"></textarea>
<button id="submitBtn">変換</button>
<label for="resultText">変換された文章：</label>
<textarea id="resultText" readonly></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
.container {
margin-top: 20px;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
button {
margin-bottom: 10px;
}
#resultText {
margin-top: 10px;
}
```
JavaScript:
```javascript
const vowels = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と", "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ", "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "ら", "り", "る", "れ", "ろ", "わ", "を", "ん"];
function convertToOjousamaText(text) {
let result = "";
for(let i=0; i<text.length; i++) {
let charCode = text.charCodeAt(i);
if(charCode >= 12353 && charCode <= 12435) {
let index = charCode - 12353;
result += vowels[index * 5];
} else if(charCode >= 12336 && charCode <= 12348) {
let index = charCode - 12336;
result += vowels[index];
} else {
result += text[i];
}
}
return result + "でありますわ。";
}
const submitBtn = document.querySelector("#submitBtn");
const textInput = document.querySelector("#textInput");
const resultText = document.querySelector("#resultText");
submitBtn.addEventListener("click", function() {
let text = textInput.value;
let ojousamaText = convertToOjousamaText(text);
resultText.value = ojousamaText;
});
```
このアプリは、HTMLのテキストエリアに入力された文章をごくシンプルなルールに沿って「お嬢様言葉」に変換し、変換結果をテキストエリアに表示します。
JavaScriptの機能としては配列やループ処理、条件分岐などを用いてお嬢様言葉への変換を行っています。また、constやletによる変数宣言、アロー関数などES6の機能も使っています。
なお、ジョークとしては「お嬢様言葉に変換された文章は、一気にお嬢様気質が高まりますわ！」というキャッチコピーをつけてみました。
